
<template>
	<view class="record-detail">
		<view class="home-top">
			
			<view class="home-top-content middleLeft">
				<view class="operationItem middleCenter">
					<view class="wyjl middleCenter operation-icon" @click="goStaticStics">
						<uni-icons type="vip-filled" size="30" color="orange"></uni-icons>
					</view>
					喂养统计
				</view>
				<view class="operationItem middleCenter">
					<!-- <view class="wyjl middleCenter operation-icon">
						<uni-icons type="vip-filled" size="30" color="orange"></uni-icons>
					</view>
					喂养统计 -->
				</view>
				<view class="operationItem middleCenter">
				<!-- 	<view class="wyjl middleCenter operation-icon">
						<uni-icons type="vip-filled" size="30" color="orange"></uni-icons>
					</view>
					喂养统计 -->
				</view>
				<view class="operationItem middleCenter">
				<!-- 	<view class="wyjl middleCenter operation-icon">
						<uni-icons type="vip-filled" size="30" color="orange"></uni-icons>
					</view>
					喂养统计 -->
				</view>
				
			</view>
		</view>
		<empty v-if="dataList.length <= 0" />
		<view class="home-list page-main" v-else>
			<data-info :data="item" v-for="(item,index) in dataList" 
			@handlderClick="goDetail(item.id)"></data-info>
		</view>
		
	</view>
</template>

<script setup>
	import {getHistoryData,paginateWithInfo} from '@/utils/index.js'
	import { onLoad,onShow,onReachBottom } from '@dcloudio/uni-app';
	import {ref} from 'vue'
	
	const goStaticStics = () => {
		uni.navigateTo({
			url: `/pages/tabbar/tabbar-1/tabbarPage/statistics`
		});
	}
	
	const goDetail=(id)=>{
		uni.navigateTo({
			url: `/pages/tabbar/tabbar-1/recordInfo?id=${id}`
		});
	}
	
	let currentPage = ref(1)
	
	const allData = ref([])
	const dataList = ref([])
	
	// 使用 onLoad 钩子函数
	onShow((options) => {
		allData.value = getHistoryData()
		dataList.value =[]
		currentPage.value = 1
		setDataList()
	})
	
	const setDataList = ()=>{
		dataList.value.push(...paginateWithInfo(allData.value,currentPage.value) )
	}
	
	onReachBottom(()=>{
		console.log('到底部了');
		if(dataList.value.length >= allData.length) return
		currentPage.value++
		setDataList()
	})
</script>

<style lang="scss" scoped>
	.record-detail{
		position: relative;
		display: flex;
		flex-direction: column;
	}
.home-top{
	//background-color: $im-bg;
	width: 100%;
	color: #000000;
	border-bottom: none;
	font-size: 32rpx;
	z-index: 99;
	margin-bottom: 20rpx;
	.home-top-content{
		height: 300rpx;
		background-color: orange;
	}
	.operationItem{
		flex: 1;
		text-align: center;
		font-size: 24rpx;
		flex-direction: column;
	}
	.wyjl{
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		background: #fff;
		margin-bottom: 10rpx;
	}
}
.home-list{
	padding: 0 20rpx;
}

</style>
